<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹球</title>
</head>
<body>
    <div id="float_box" style="position:absolute; border:1px solid #ccc; width: 600px; height: 300px; margin-bottom: 50px;">
        <div id="float_obj" style="position: absolute; width: 30px; height: 30px; border: 1px solid #f00; border-radius: 50%;">
            <img src="./images/jingdong-tips.png" alt="" style="display: block; width: 30px; height: 30px; border-radius: 50%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;">
        </div>
        <div id="float_bottom" style="height:15px; width: 75px; background-color: #eeeeee; position: absolute; bottom: 0px; left: 0;"></div>
    </div>

    
</body>
</html>
<script>
    var box = document.getElementById("float_box"); //漂浮对象所在的父元素
    var obj = document.getElementById("float_obj"); //漂浮对象
    var x = 100;  //图片所在的初始位置
    var y = 100;  //图片所在的初始位置
    var xin = true; //确定元素在父元素x轴内部
    var yin = true; //确定元素在父元素y轴内部
    var step = 1; //每次x轴移动的像素
    var height = 1; //每次y轴移动的像素
    var delay = 10; //延时时间
    // 漂浮函数
    function float(){
        var L = 0; //左边边界
        var T = 0; //上边边界
        // 可移动宽度=body宽度 - 元素自身宽度
        var maxW = box.offsetWidth - obj.offsetWidth;
        var maxH = box.offsetHeight - obj.offsetHeight;
        x = x + step*(xin ? 1 : -1); //在body内部+， 在body外部-
        y = y + step*(yin ? 1: -1);  //在body内部+， 在body外部-
        if(x < L){
            xin = true;
            x = L;
        };//x小于左边边界，改变xin，初始化x
        if(x > maxW){
            xin = false;
            x = maxW;
        };//x大于可移动的最大宽度，改变xin，初始化x
        if(y < T){
            yin = true;
            y = T;
        };
        if(y > maxH){
            yin = false;
            y = maxH;
        }
        //判断水平位置
        // 改变元素的位置，元素使用的绝对定位
        obj.style.marginLeft = x + "px";
        obj.style.marginTop = y + "px";
    }
    var t = setInterval("float()", delay);
    obj.onmouseover = function(){clearInterval(t);};
    obj.onmouseout = function(){t = setInterval("float()",delay)};

    //底边浮台
    // keyCode 37——左键  38——上键 39——右键 40——下键
    var x1=0;
    var btm = document.getElementById("float_bottom");
    var bottom_step = 20; //底部浮台每次移动的距离
    document.onkeydown = function(event){
        if(event.keyCode == 37){
            // console.log("左");
            var maxBW = box.offsetWidth - btm.offsetWidth;
            x1 = parseInt(btm.style.left);
            if(x1 <= maxBW){
                x1 = x1 + (bottom_step*-1);
                btm.style.left = x1 +'px';
            }
            if(x1 < 0){
                x1 = 0;
                btm.style.left = x1 +'px';
            }
        }
        if(event.keyCode == 39){
            // console.log("右");
            var maxBW = box.offsetWidth -btm.offsetWidth;
            x1 = parseInt(btm.style.left);
            if(x1 < maxBW){
                x1 = x1 + (bottom_step*1);
                btm.style.left = x1 +'px';
            }
            if(x1 >= maxBW){
                x1 = maxBW - 1;
                btm.style.left = x1 +'px';
            }
        }
        if(event.keyCode == 38){ console.log("上");}
        if(event.keyCode == 40){ console.log("下");}
    }
</script>